<template lang='pug'>
.cesiumContainer(id="cesiumContainer" style="width:100%;height:100%")
  transition(name='component-fade' mode="out-in")
    component(:is='popView' :inf='popInf')
  slot
  drawUntil(v-if='drawTool')
  drawTip(:pos='screenPos' v-if='drawTool')
</template>

<script>
import 'cesium/Widgets/widgets.css';
let Cesium = require('cesium/Cesium');
export default {
  name: 'cesiumContainer',
  components:function(){
    return{
      'drawUntil':()=>import('../drawtool/drawUntil.vue'),
      'drawTip':()=>import('../drawtool/drawTip.vue'),
      'popview':()=>import('../popViewer/popview.vue'),
      'popVoid':()=>import('../popViewer/popVoid.vue'),
    }
  }(),
  props:{
    drawTool:{default:false}
  },
  data() {
    return {
      Cesium:null,
      viewer:null,
      popInf:{},
      popView:'',
      screenPos:{x:0,y:0}
    }
  },
  created() {
    this.Cesium=Cesium
  },
  mounted () {
    let t=this
    t.viewer=new Cesium.Viewer('cesiumContainer',{
        imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
            url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
            enablePickFeatures: false,
        }),
        selectionIndicator: false,
        animation: false,  //是否显示动画控件
        homeButton:false,
        baseLayerPicker: false, //是否显示图层选择控件
        geocoder: false, //是否显示地名查找控件
        timeline: false, //是否显示时间线控件
        sceneModePicker: false, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        infoBox: false,  //是否显示点击要素之后显示的信息
        fullscreenButton: false
    })
    t.viewer._cesiumWidget._creditContainer.style.display = "none";//删除左下角logo
    this.$nextTick(()=>{
      t.load()
    })
  },
  methods:{
    flyToEntry(){
    
    },
    load(){
      let t=this
      //设置初始位置
      this.viewer.camera.setView({
          destination: Cesium.Cartesian3.fromDegrees(110.20, 34.55, 300000)
      });
      let scene=this.viewer.scene
      let handle=new Cesium.ScreenSpaceEventHandler(scene.canvas)
      handle.setInputAction(function(e){
        let pick=scene.pick(e.position)
        console.log(pick)
        if(pick && pick.id && pick.id._inf){
          if(pick.id._type=='billboard'){
            t.popView=pick.id._inf.pop.nam
            t.popInf=pick.id._inf
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    }
  },
}
</script>

<style lang='scss' scoped>
  .component-fade-enter-active, 
  .component-fade-leave-active {
    transition: opacity .3s ease;
  }
  .component-fade-enter, 
  .component-fade-leave-to {
    opacity: 0;
  }
</style>
